<template>
  <view @click="dismiss" class="layer" v-if="isShow">
    <!-- <view class="top-gifts" v-if='from!="chat"'>
			<u-icon name="gift" color="#FF5998" size="32"></u-icon>
			<text>送礼物好感度更高哦～</text>
		</view> -->
    <view @click.stop="bottomClick" class="layer_bottom">
      <view class="text-view-box" v-if="from != 'chat'">
        <input
          type="text"
          v-model="inputValue"
          confirm-type="done"
		  :focus="true"
          placeholder-class="placeholder_text"
          placeholder="看到你就觉得非常有眼缘，可以认识一下吗？"
        />
        <div class="right-action">
          <image
            @click.stop="showEmoAction()"
            src="https://static.kuaimayoupin.com/388860681975864.png"
          ></image>
          <view @click.stop="sendGiftAction" class="sure-btn">
            <text> 确定 </text>
          </view>
        </div>
      </view>
      <!-- <view class="roses-title-view">
				<text>我的玫瑰：</text>
				<text>{{getMyroseCount()}}</text>
				<image src="../../../static/images/mall/flower@2x.png"></image>
			</view> -->

      <!-- <scroll-view v-if="!showPannel" class="scroll-container" scroll-y="true">
				<view class="flower-wrap-box">
					<view @click.stop="iconClickAction(index)" class="wrap-item" v-for="(item, index) in giftsData.gifts" :key="item._id">
						<view :class="[activity(index) ? 'wrap-item-back' : '']"></view>
						<image @click.stop="iconClickAction(index)" :src="item.icon" mode="aspectFit"></image>
						<view class="flower-text">{{item.label || ""}}</view>
						<view class="flower-text">{{item.cost || 1 }}支</view>
					</view>
				</view>
			</scroll-view> -->
      <swiper v-if="showPannel" class="slider">
				<swiper-item v-for="(item, key) in emojiData" :key="key" class="slider-emoji">
					<text v-for="(emoji, index) in item" :key="index" @click="selemoji(emoji)">{{ emoji }}</text>
				</swiper-item>
			</swiper>
      <!-- <view class="bottom-container">
				<view class="bottom-left">
					<text>送给</text>
					<image :src="giftsData.userInfo.avatar || 'http://static.kuaimayoupin.com/5814340611455953.png'"></image>
				</view>

				<view @click.stop="sendGiftAction" class="sure-btn">
					<text> 确定 </text>
				</view>
			</view> -->
    </view>
    <roseNotEnoughDialog
      :isShow="showRoseNotEnoughDialog"
      :roseData="roseData"
      v-on:dismiss="roseNotEnoughDismiss"
    ></roseNotEnoughDialog>
    <roseGiveDialog
      :roseData="roseData"
      :isShow="showRoseGiveDialog"
      v-on:roseGiveSure="roseGiveSure"
      v-on:dismiss="showRoseGiveAction"
    ></roseGiveDialog>
  </view>
</template>

<script>
import emoji from "@/components/emoji.js";
import { loadVipinfo } from "@/api/user/user.js";
import { sendGifts, greetSend, apply } from "@/api/home/home.js";
import roseNotEnoughDialog from "@/pages/home/components/rose-notenough-dialog.vue";
import roseGiveDialog from "@/pages/home/components/rose-give-dialog.vue";
/// 关注对话框
import helloGiftView from "@/pages/home/components/hello-gift-view.vue";
export default {
  components: {
    roseNotEnoughDialog,
    roseGiveDialog,
    helloGiftView,
    roseGiveDialog,
  },
  props: {
    from: "",
    isShow: Boolean,
    giftsData: Object,
  },
  created() {
    var page = Math.ceil(emoji.length / 21);
    for (let i = 0; i < page; i++) {
      this.emojiData[i] = [];
      for (let k = 0; k < 21; k++) {
        emoji[i * 21 + k] ? this.emojiData[i].push(emoji[i * 21 + k]) : "";
      }
    }
  },
  mounted() {
    this.meCount = this.getMeCount();
  },
  watch: {
    isShow() {
      this.selectedIndex = -1;
      this.showPannel = false;
      this.meCount = this.getMeCount();
      this.inputValue = "";
    },
  },

  data() {
    return {
      chooseGiftItem: {},
      showRoseNotEnoughDialog: false,
      selectedIndex: -1,
      roseData: {},
      showRoseGiveDialog: false,
      meCount: 0,
      inputValue: "",
      showPannel: false,
      emojiData: [],
    };
  },
  methods: {
    getMyroseCount() {
      let vipInfo = uni.getStorageSync("vipInfo") || {};
      return vipInfo.balance || 0;
    },
    dismiss() {
      console.log("dismiss");
      this.$emit("dismiss");
    },
    bottomClick() {
      console.log("bottom click");
    },
    sendGiftAction() {
      let note = this.inputValue || "";
      if (note === "") {
        // uni.showToast({
        // 	title: "请输入内容"
        // })
        // return
        note = "看到你就觉得非常有眼缘，可以认识一下吗？";
      }
      let meCount = this.getMeCount();
      console.log("sendGiftAction");
	  this.roseGiveSure();
    //   if (this.selectedIndex < 0) {
    //     uni.showToast({
    //       title: "请选择你要送的礼物",
    //       icon: "none",
    //     });
    //   } else {
    //     if (this.roseData.sendCount > meCount) {
    //       this.showRoseNotEnoughDialog = true;
    //     } else {
    //       if (uni.getStorageSync("roseGiveAlertTag") || false) {
    //         this.roseGiveSure();
    //       } else {
    //         this.showRoseGiveDialog = true;
    //       }
    //     }
    //   }
    },
    selemoji(m) {
      // console.log(this.$refs.text.selectionStart)
      this.inputValue += m;
    },
    // 点击表情
    showEmoAction() {
      this.showPannel = !this.showPannel;
    },
    /// 确定发送
    roseGiveSure() {
      console.log("确定发送 userInfo", this.giftsData.userInfo);
      // return
      let userInfo =
        this.giftsData.userInfo || this.giftsData.userInfo.userinfo;
      let gift_id = this.roseData.id || "";
      let note = this.inputValue || "";
    //   if (gift_id === "") {
    //     uni.showToast({
    //       title: "请选择你要送的礼物",
    //     });
    //     return;
    //   }

      let data = {
        user_id: userInfo.user_id || userInfo.userId,
        gift_id: gift_id,
        note: note,
      };
      let data1 = {
        toUserID: userInfo.user_id || userInfo.userId,
        giftID: gift_id,
        note: note,
      };
    //   sendGifts(data1).then((res) => {});
      greetSend(data).then((res) => {
        if (res.status == 1) {
          var parios = {
            message: note,
            messageType: 2,
            userID: userInfo.user_id || userInfo.userId,
          };
          console.log(this.giftsData.userInfo);
          this.dismiss();
          this.refreshMyRoseCount();
          if (this.from == "chat") {
            console.log(this.roseData);
            this.$emit("sendGift", {
              chooseGiftItem: this.chooseGiftItem,
              roseData: this.roseData,
            });
            return;
          }

          uni.showToast({
            title: "打招呼成功",
          });
        }
      });
    },
    helloActionRequest() {
      let userInfo = this.giftsData.userInfo || {};
      let note = this.inputValue;
      let data = {
        user_id: userInfo.user_id || "",
        gift_id: this.roseData.id || "",
      };
      greetSend(data).then((res) => {
        if (res.status == 1) {
          uni.showToast({
            title: "打招呼成功",
          });
          this.dismiss();
          this.refreshMyRoseCount();
        }
        console.log("rose-give-res-------", res);
      });
    },
    refreshMyRoseCount() {
      loadVipinfo().then((res) => {
        if (res.status == 1) {
          uni.setStorageSync("vipInfo", res.data);
          getApp().globalData.vipInfo = res.data;
          console.log(
            "this.globalData.vipInfo-------=",
            getApp().globalData.vipInfo
          );
        }
      });
    },

    getMeCount() {
      let vipInfo = getApp().globalData.vipInfo || {};
      return vipInfo.balance || 0;
    },
    roseNotEnoughDismiss() {
      this.showRoseNotEnoughDialog = false;
    },
    showRoseGiveAction(show) {
      this.showRoseGiveDialog = show;
    },
    activity(index) {
      return index === this.selectedIndex;
    },
    iconClickAction(index) {
      this.selectedIndex = index;
      let vipInfo = getApp().globalData.vipInfo || {};
      let meCount = vipInfo.balance || 0;
      let item = this.giftsData.gifts[this.selectedIndex];
      // let price = item.price || 1
      this.chooseGiftItem = item;
      let price = item.cost || 1;
      this.roseData = {
        meCount: meCount,
        sendCount: price,
        id: item._id || "",
      };
    },
    gitIcon(item) {
      let icon = item.icon || "";
      if (icon === "") {
        return "https://static.kuaimayoupin.com/7867046416984442.jpg";
      } else {
        return icon;
      }
    },
  }
};
</script>

<style scoped lang="scss">
* {
  box-sizing: border-box;
  display: flex;
}

.layer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 96%;
  z-index: 999;
  background: transparent;

  .top-gifts {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 346upx;
    height: 64upx;
    background: #ffeef4;
    border-radius: 32upx;
    margin-bottom: 20upx;
    margin-left: 32upx;
    padding: 0 20upx;
    align-self: flex-start;

    text {
      margin-left: 12upx;
      font-size: 26upx;
      font-weight: 400;
      color: rgba(71, 74, 88, 1);
    }
  }

  .layer_bottom {
    display: flex;
    width: 750upx;
	// padding-bottom: 20upx;
    background-color: #ffffff;
    flex-direction: column;

    .text-view-box {
      display: flex;
      height: 108upx;
      width: 100%;
      border-top: 2upx solid #e9ebf0;
      border-bottom: 2upx solid #e9ebf0;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      padding: 0 20upx 0 20upx;

      input {
        height: 64upx;
        background: #f3f6f8;
        border-radius: 4upx;
        flex: 1;
		padding: 0 10upx;
      }

      .right-action {
        display: flex;
        flex-direction: row;
        align-items: center;
		padding: 0 10upx;

        .sure-btn {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 100upx;
          height: 56upx;
		  margin-left: 10upx;
          background: linear-gradient(
            135deg,
            rgba(252, 79, 145, 1) 0%,
            rgba(253, 108, 230, 1) 100%
          );
          border-radius: 4upx;

          text {
            font-size: 30upx;
            font-weight: 500;
            color: rgba(255, 255, 255, 1);
          }
        }
      }

      .placeholder_text {
        margin-left: 10upx;
        font-size: 30upx;
        font-weight: 400;
        color: rgba(71, 74, 88, 1);
      }

      image {
        width: 50upx;
        height: 50upx;
      }
    }

    .roses-title-view {
      width: 100%;
      display: flex;
      flex-direction: row;
      align-items: center;
      padding: 20upx 40upx;

      text {
        font-size: 26upx;
        font-weight: 500;
        color: rgba(71, 74, 88, 1);
        line-height: 36upx;
      }

      image {
        margin-left: 10upx;
        width: 28upx;
        height: 30upx;
      }
    }

    .slider {
      width: 100%;
      height: 256rpx;

      .slider-emoji {
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        // justify-content: center;

        text {
          // width: 53%;
          text-align: center;
          padding: 21rpx 30rpx;
        }
      }
    }

    .scroll-container {
      display: flex;
      flex: 1;
      flex-direction: column;

      .flower-wrap-box {
        display: flex;
        flex-direction: row;
        width: 100%;
        flex-wrap: wrap;

        .wrap-item {
          position: relative;
          width: 25%;
          // height: 160upx;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          margin-bottom: 10upx;

          image {
            width: 100%;
            height: 140upx;
          }

          .flower-text {
            font-size: 24upx;
            font-weight: 400;
            color: rgba(71, 74, 88, 1);
            line-height: 36upx;
          }

          .wrap-item-back {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 168rpx;
            height: 100%;
            background: linear-gradient(135deg, #fc4f91 0%, #fd6ce6 100%);
            border-radius: 8rpx;
            opacity: 0.12;
          }
        }
      }
    }

    .bottom-container {
      width: 100%;
      height: 88upx;
      display: flex;
      flex-direction: row;
      border-top: 2upx solid #e9ebf0;
      align-items: center;
      justify-content: space-between;
      padding: 0 32upx;
      position: relative;
      z-index: 300;
      background-color: #fff;
      .bottom-left {
        display: flex;
        flex-direction: row;
        align-items: center;
        height: 100%;

        text {
          color: #8389a0;
          font-size: 30upx;
          font-weight: 500;
          line-height: 42upx;
        }

        image {
          margin-left: 18upx;
          width: 56upx;
          height: 56upx;
          border-radius: 28upx;
        }
      }

      .sure-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 120upx;
        height: 64upx;
        background: linear-gradient(
          135deg,
          rgba(252, 79, 145, 1) 0%,
          rgba(253, 108, 230, 1) 100%
        );
        border-radius: 4upx;

        text {
          font-size: 30upx;
          font-weight: 500;
          color: rgba(255, 255, 255, 1);
        }
      }
    }
  }
}
</style>
